我們今天在 Vue 應用中宣告一個資料 counter
,並且設定一個按鈕綁定點擊事件,此時當我們點擊按鈕時,會發現按鈕上的 counter
變數值加一,我們將相同按鈕程式碼複製再產生一個相同的按鈕。此點會發現當我們點擊按鈕時,兩顆按鈕的資料都會加一,如果我們要將按鈕的資料分開,可能的做法是將不同的按鈕綁定不同的變數,但這樣就變成我們要多設定一個變數,如果此時按鈕一多,那麼要設定新的變數也會變多。此時我們可以使用 Vue 元件的做法來解決這個問題。透過元件,我們可以將程式給模組化重複利用。接下來說明元件的使用方式,首先我們必須再 Vue 應用程式前面宣告一個 Vue.component
,() 內第一個參數我們放的是元件的名稱,像是範例程式將元件名稱設定成 'counter'
,接下來第二個參數就很像是我們宣告一個 Vue app 的樣子,裡面是一個物件形式,也有 data
資料不過和一般 Vue 應用宣告的方式不太一樣,我們必須以物件的形式透過 function return
來傳遞資料,像是範例程式我們將資料 counter
包裝物件透過函數來回傳。接下來我們使用 template
的方式來宣告元件,有很多可以產生元件的方法,這邊我們先用 template
為例子,template
裡面我們必須以字串的方式來放入我們想在畫面呈現的程式碼,就很像是 js 的 innerHTML
,然後這邊我們使用一個 js ES6 模版字符串
的語法,將我們要呈現在畫面上的 html 程式語法直接打在模版字符串
裡面,透過此方法我們可以省略串接字串的加號,更容易撰寫程式,因此我們複製上一個按鈕得程式碼將它放進中,最後我們透過元件<counter></counter>
來產生兩格按鈕,當我們點擊兩顆按鈕時,可以明顯發現按鈕內的資料不會都加一,達到了資料的獨立。透過 Vue 開發者工具,我們也可以看到再在root 元件
裡面有兩個 counter
元件,點進去 counter
元件發現他們的資料確實都是獨立的。
<body>
<div id='app'>
一般寫法:
<button @click="counter+=1">{{counter}}</button>
<button @click="counter+=1">{{counter}}</button>
元件寫法:
<counter></counter>
<counter></counter>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('counter',{
data:function(){
return{
counter: 0
}
},
template:`
<button @click="counter+=1">{{counter}}</button>
`
});
var app = new Vue({
el: '#app',
data:{
counter: 0
}
})
</script>